<script setup>
import CustomCom from './components/05.自定义插件/03.defineExpose.vue'
import { inject, ref, onMounted, watch } from 'vue'
const global = inject('$global')

const sonRef = ref(null)
const dataFromSon = ref(0)

onMounted(() => {
  console.log(sonRef.value)

  watch(
    () => sonRef.value.b,
    (newValue, oldValue) => {
      // console.log(newValue, oldValue)
      dataFromSon.value = newValue
    }
  )
})
</script>

<template>
  <div>
    <div class="app-title">App.vue</div>
    <!-- <p>{{ global }}</p> -->
    <!-- <p>子组件中 b 属性的值是：{{ sonRef?.b }}</p> -->
    <p>子组件中 b 属性的值是：{{ dataFromSon }}</p>
    <button @click="sonRef.b++">b++</button>
    <button @click="sonRef.increment()">调用子组件中的 increment 函数</button>
    <hr />

    <CustomCom ref="sonRef" />
  </div>
</template>

<style scoped>
.app-title {
  font-size: 30px;
}
</style>
